<template>
  <div class="app-container">
    <div class="bg">
      <div class="top" @click="goback">
        <div class="top-left">天津静海子牙精细技术开发区高新产业园</div>
        <div class="top-rghit">
          <div class="year">{{ currentDate }}</div>
          <div class="time">{{ currentTime }}</div>
        </div>
      </div>
      <div class="content">
        <!-- 左侧园区展示 -->
        <div class="content-left">
          <div class="exhibitionbg mb20"></div>
          <div class="exhibitionlist">
            <div
                class="exhibition-item"
                v-for="(item, index) in parkDisplay"
                :key="index"
            >
              <img class="exhibition-item-img" :src="item.display_image_path" />
              <div class="exhibition-item-btm fcc f14cf">
                {{ item.display_map_name }}
              </div>
            </div>
          </div>
        </div>

        <!-- 中间核心数据 -->
        <div class="content-centre">
          <div class="business-data">总企业数</div>
          <div class="business-num">
            {{ dataDashboard.total_enterprise_count }}
          </div>

          <div class="area">
            <div class="project item">
              <div class="boxtext">
                <div class="boxtext-top">规划面积</div>
                <div class="boxtext-btoom">
                  {{ dataDashboard.planned_area }} km²
                </div>
              </div>
            </div>
            <div class="activate item">
              <div class="boxtext">
                <div class="boxtext-top">已建成面积</div>
                <div class="boxtext-btoom">
                  {{ dataDashboard.built_area }} km²
                </div>
              </div>
            </div>
            <div class="worker item">
              <div class="boxtext">
                <div class="boxtext-top">产业工人 (人)</div>
                <div class="boxtext-btoom">
                  {{ dataDashboard.industrial_worker_count }}
                </div>
              </div>
            </div>
          </div>

          <div class="supplybg"></div>
          <div class="quantity mb30">
            <div class="quantity-item fcc">
              <div class="fcolcc">
                <div class="f28bcf">{{ dataDashboard.transaction_volume }}</div>
                <div class="f14cf">成交数量(笔)</div>
              </div>
            </div>
            <div class="quantity-item fcc">
              <div class="fcolcc">
                <div class="f28bcf">
                  ￥{{ formatAmount(dataDashboard.transaction_amount) }}
                </div>
                <div class="f14cf">成交金额(元)</div>
              </div>
            </div>
          </div>

          <!-- 产业布局部分 -->
          <div class="industry-section">
            <div class="industrybg"></div>
            <div class="enterprise-stats-container">
              <!-- 左侧饼状图 -->
              <div class="pie-chart-container">
                <div class="pie-chart-wrapper">
                  <div class="pie-chart" ref="pieChart"></div>
                </div>
              </div>
              <!-- 右边列表 -->
              <div class="enterpriselist-container">
                <div class="enterpriselist">
                  <div
                      v-for="(item, index) in enterpriseList"
                      :key="index"
                      class="enterpris-item fc f14cf"
                      :class="{ active: activeIndex === index }"
                      @click="activeIndex = index"
                  >
                    <div class="selection-indicator">
                      <img
                          v-if="activeIndex === index"
                          src="@/assets/image/info/selected-icon.png"
                          class="selected-icon"
                      />
                    </div>
                    <span class="enterprise-name">{{ item.name }}</span>：{{ item.value }} 家
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧园区信息 -->
        <div class="content-right ml20">
          <div class="overallbg mb15"></div>
          <img class="overallimg mb30" :src="dataDashboard.park_brand_image" />

          <div class="developbg mb15"></div>
          <img
              class="developbox mb30"
              :src="dataDashboard.park_development_image"
          />
        </div>
      </div>
      <!-- 底部对齐辅助线 -->
      <div class="bottom-align-helper"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import * as echarts from "echarts";
import infoApi from "@/api/info";
const router = useRouter();
const route = useRoute();

// 数据状态
const dataDashboard = ref({
  total_enterprise_count: 0,
  planned_area: "0.00",
  built_area: "0.00",
  industrial_worker_count: 0,
  transaction_volume: "0.00",
  transaction_amount: "0.00",
  park_brand_image: "",
  park_development_image: "",
  other_enterprise_count: 0,
  foreign_invested_enterprise_count: 0,
  high_tech_enterprise_count: 0,
  national_high_tech_enterprise_count: 0,
  manufacturing_enterprise_count: 0,
  specialized_and_sophisticated_sme_count: 0,
  specialized_and_sophisticated_little_count: 0,
  innovative_sme_count: 0,
  municipal_singular_leader_count: 0,
  gazelle_enterprise_count: 0,
  national_singular_leader_count: 0,
  unicorn_enterprise_count: 0,
  listed_company_count: 0
});

const parkDisplay = ref([]);

// 当前时间
const currentDate = ref("");
const currentTime = ref("");

// 名称映射表 - 解决数据返回不完整的问题
const nameCorrectionMap = {
  '其他1': '其他企业',
  '外资企': '外资企业',
  '蒙': '内蒙古相关企业',
  '业:': '企业:',
  // 可根据实际数据补充其他需要修正的名称
};

// 格式化金额
const formatAmount = (amount) => {
  if (!amount) return "0.00";
  return parseFloat(amount).toLocaleString("zh-CN", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentDate.value = `${now.getFullYear()}.${(now.getMonth() + 1)
      .toString()
      .padStart(2, "0")}.${now.getDate().toString().padStart(2, "0")}`;
  currentTime.value = `${now.getHours().toString().padStart(2, "0")} : ${now
      .getMinutes()
      .toString()
      .padStart(2, "0")} : ${now.getSeconds().toString().padStart(2, "0")}`;
};

// 颜色配置
const colors = ["#00EEFF", "#E81542", "#158BE8", "#27E99D", "#E89900"];

// 响应式数据
const activeIndex = ref(0);
const activeEnterprise = ref(null);
const pieChart = ref(null);
const chartInstance = ref(null);

// 计算饼图数据 - 包含名称修正
const pieChartData = computed(() => {
  if (!dataDashboard.value) return [];

  const rawData = [
    {
      value: parseInt(dataDashboard.value.other_enterprise_count) || 0,
      name: "其他企业",
    },
    {
      value:
          parseInt(dataDashboard.value.foreign_invested_enterprise_count) || 0,
      name: "外资企业",
    },
    {
      value: parseInt(dataDashboard.value.high_tech_enterprise_count) || 0,
      name: "四上企业",
    },
    {
      value:
          parseInt(dataDashboard.value.national_high_tech_enterprise_count) || 0,
      name: "国家高新技术企业",
    },
    {
      value: parseInt(dataDashboard.value.manufacturing_enterprise_count) || 0,
      name: "制造企业",
    },
  ];

  // 修正可能的名称问题
  return rawData.map(item => ({
    ...item,
    name: nameCorrectionMap[item.name] || item.name
  }));
});

// 计算企业列表数据 - 包含名称修正
const enterpriseList = computed(() => {
  if (!dataDashboard.value) return [];

  const rawList = [
    {
      name: "专精特新中小企业",
      value: dataDashboard.value.specialized_and_sophisticated_sme_count || "0",
    },
    {
      name: "专精特新小巨人",
      value:
          dataDashboard.value.specialized_and_sophisticated_little_count || "0",
    },
    {
      name: "战略性新兴企业",
      value: dataDashboard.value.innovative_sme_count || "0",
    },
    {
      name: "市级单项冠军",
      value: dataDashboard.value.municipal_singular_leader_count || "0",
    },
    {
      name: "雏鹰企业",
      value: dataDashboard.value.gazelle_enterprise_count || "0",
    },
    {
      name: "国家级单项冠军",
      value: dataDashboard.value.national_singular_leader_count || "0",
    },
    {
      name: "瞪羚企业",
      value: dataDashboard.value.unicorn_enterprise_count || "0",
    },
    {
      name: "上市公司",
      value: dataDashboard.value.listed_company_count || "0",
    },
  ];

  // 修正可能的名称问题
  return rawList.map(item => ({
    ...item,
    name: nameCorrectionMap[item.name] || item.name
  }));
});

// 初始化饼图 - 调整大小并优化文字显示
const initPieChart = () => {
  if (!pieChart.value) return;

  // 销毁已有实例
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }

  chartInstance.value = echarts.init(pieChart.value);

  // 获取容器尺寸，动态调整配置
  const container = pieChart.value.getBoundingClientRect();
  const containerWidth = container.width;
  const containerHeight = container.height;
  const baseSize = Math.min(containerWidth, containerHeight);

  // 调整字体和线条长度，确保文字可见
  const labelFontSize = Math.max(12, Math.min(14, baseSize * 0.04)); // 增大字体
  const labelLineLength = Math.max(10, baseSize * 0.03); // 增长标签线
  const labelLineLength2 = Math.max(10, baseSize * 0.05);

  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c}家 ({d}%)",
      backgroundColor: 'rgba(10, 27, 55, 0.9)', // 深色背景提高可见度
      borderColor: '#158BE8',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 14 // 增大提示框字体
      },
      padding: 10,
      // 确保tooltip始终可见
      position: function(point, params, dom, rect, size) {
        // 鼠标位置
        const x = point[0];
        const y = point[1];

        //  tooltip大小
        const tooltipWidth = size.contentSize[0];
        const tooltipHeight = size.contentSize[1];

        // 容器大小
        const viewWidth = containerWidth;
        const viewHeight = containerHeight;

        // 计算位置，避免超出容器
        let posX = x + 10;
        let posY = y + 10;

        if (posX + tooltipWidth > viewWidth) {
          posX = x - tooltipWidth - 10;
        }

        if (posY + tooltipHeight > viewHeight) {
          posY = y - tooltipHeight - 10;
        }

        return [posX, posY];
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '5%',
      bottom: '5%',
      containLabel: true
    },
    graphic: [
      {
        type: "circle",
        shape: {
          cx: "50%",
          cy: "50%",
          r: `${baseSize * 0.15}px`, // 适当增大内圆
        },
        style: {
          fill: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "rgba(21,139,232,0.3)" },
              { offset: 0.5, color: "rgba(21,139,232,0.7)" },
              { offset: 1, color: "#158BE8" },
            ],
          },
          shadowColor: "#158BE8",
          shadowBlur: 8,
        },
        z: 2,
      },
      {
        type: "text",
        left: "center",
        top: "center",
        style: {
          text: "产业布局",
          textAlign: "center",
          fill: "#FFFFFF",
          fontFamily: "Alimama ShuHeiTi",
          fontWeight: "bold",
          fontSize: labelFontSize + 3, // 增大中心文字
        },
        z: 3,
      },
    ],
    series: [
      // 内层粗饼图 - 调整大小
      {
        name: "企业分布",
        type: "pie",
        radius: [`${baseSize * 0.18}`, `${baseSize * 0.28}`], // 增大内层饼图
        center: ["50%", "50%"],
        itemStyle: {
          borderColor: "#0A1B37",
          borderWidth: 2,
          opacity: 0.7,
        },
        label: { show: false },
        labelLine: { show: false },
        data: pieChartData.value.map((item, index) => ({
          ...item,
          itemStyle: { color: colors[index], opacity: 0.3 }
        })),
      },
      // 外层细饼图 - 调整大小
      {
        name: "企业分布",
        type: "pie",
        radius: [`${baseSize * 0.32}`, `${baseSize * 0.40}`], // 增大外层饼图
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: "#0A1B37",
          borderWidth: 1,
        },
        label: {
          show: true,
          formatter: function(params) {
            const correctedName = nameCorrectionMap[params.name] || params.name;

            // 优化文字显示，确保完整可见
            if (correctedName.length > 5) {
              return `${correctedName.substring(0, 5)}\n${correctedName.substring(5)}: ${params.value}家`;
            }
            return `${correctedName}: ${params.value}家`;
          },
          position: "outside",
          color: "#fff",
          fontSize: labelFontSize,
          fontWeight: "bold",
          lineHeight: 1.8,
          // 智能旋转标签，避免文字重叠
          rotate: function(params) {
            const angle = params.dataIndex * (360 / pieChartData.value.length);
            return angle > 90 && angle < 270 ? angle + 180 : angle;
          },
          overflow: 'none',
          padding: [5, 10],
          z: 100
        },
        labelLine: {
          show: true,
          length: labelLineLength,
          length2: labelLineLength2,
          lineStyle: {
            width: 1.5, // 加粗标签线
            color: "rgba(255, 255, 255, 0.9)", // 提高透明度
          },
          smooth: true
        },
        sort: (a, b) => b.value - a.value,
        data: pieChartData.value.map((item, index) => ({
          ...item,
          itemStyle: { color: colors[index] }
        })),
      },
    ]
  };

  chartInstance.value.setOption(option);

  // 监听窗口大小变化
  const handleResize = () => {
    chartInstance.value.resize();
    setTimeout(initPieChart, 100);
  };

  window.addEventListener('resize', handleResize);

  // 组件卸载时移除事件监听
  return () => {
    window.removeEventListener('resize', handleResize);
  };
};

// 获取数据
const fetchData = async () => {
  try {
    const response = await infoApi.getDataDashboard();
    if (response.code === 200) {
      dataDashboard.value = response.data.data.dataDashboard;
      parkDisplay.value = response.data.data.parkDisplay;

      // 确保DOM更新后初始化图表
      nextTick(() => {
        initPieChart();
        if (enterpriseList.value.length > 0) {
          activeEnterprise.value = enterpriseList.value[0];
        }
      });
    }
  } catch (error) {
    console.error("获取数据大屏数据失败:", error);
  }
};

const redirect = route.query.redirect ? route.query.redirect : "/";
const goback = () => {
  router.push(redirect);
};

// 初始化
onMounted(() => {
  // 设置基础缩放比例
  setBaseFontSize();

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    setBaseFontSize();
    if (pieChart.value) {
      initPieChart();
    }
  });

  updateTime();
  fetchData();

  // 每秒更新时间
  setInterval(updateTime, 1000);

  // 每30秒刷新数据
  setInterval(fetchData, 30000);
});

// 设置基础字体大小，用于rem单位的缩放
const setBaseFontSize = () => {
  const designWidth = 1920; // 设计稿宽度
  const fontSize = (window.innerWidth / designWidth) * 10;
  document.documentElement.style.fontSize = `${fontSize}px`;
};

// 监听窗口大小变化，更新图表
watch(
    () => window.innerWidth,
    () => {
      if (chartInstance.value) {
        chartInstance.value.resize();
      }
    }
);
</script>

<style lang="less">
// 基础样式设置
html {
  font-size: calc(100vw / 1920 * 10);
  overflow: hidden;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.app-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.bg {
  width: 100%;
  height: 100%;
  background: url("@/assets/image/info/背景.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;

  // 底部对齐辅助元素
  .bottom-align-helper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    clear: both;
  }

  .top {
    background: url("@/assets/image/info/头部.png") no-repeat center center;
    background-size: 100% 100%;
    height: 13.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12rem;
    box-sizing: border-box;

    .top-left {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.4rem;
      color: #ffffff;
      line-height: 16.2rem;
    }

    .top-rghit {
      display: flex;
      align-items: center;

      .year {
        font-family: DIN;
        font-weight: 400;
        font-size: 2.2rem;
        color: #ffffff;
        line-height: 16.2rem;
      }

      .time {
        margin-left: 2rem;
        font-family: DIN;
        font-weight: bold;
        font-size: 2.6rem;
        color: #ffffff;
        line-height: 16.2rem;
      }
    }
  }

  .content {
    height: calc(100% - 13.5rem);
    padding: 0 5rem 3rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 顶部对齐 */
    gap: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }

    // 统一三个区域的顶部间距，确保对齐
    .content-left, .content-centre, .content-right {
      margin-top: 0;
    }

    .content-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      max-height: 100%;

      .exhibitionbg {
        background: url("@/assets/image/info/园区展示.png") no-repeat left center;
        background-size: auto 100%;
        height: 4.4rem;
        width: 100%;
      }

      .exhibitionlist {
        width: 100%;
        max-width: 47rem;
        background: linear-gradient(
            -270deg,
            rgba(26, 73, 135, 0) 0%,
            #1a4987 48%,
            rgba(26, 73, 135, 0) 100%
        );
        opacity: 0.6;
        display: flex;
        flex-wrap: wrap;
        padding: 1.8rem 1.1rem;
        box-sizing: border-box;
        flex-grow: 1;

        .exhibition-item {
          width: calc(50% - 0.5rem);
          height: 11.1rem;
          position: relative;
          margin-bottom: 1rem;

          &:nth-child(odd) {
            margin-right: 1rem;
          }

          .exhibition-item-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .exhibition-item-btm {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 3rem;
            background: #3c7acd;
            opacity: 0.7;
          }
        }
      }
    }

    .content-centre {
      flex: 1.2;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-start;

      .industry-section {
        flex-grow: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
        max-height: 40rem; /* 增加最大高度，给饼图更多空间 */
      }

      .enterprise-stats-container {
        display: flex;
        padding: 1.5rem 2rem;
        box-sizing: border-box;
        background: rgba(26, 73, 135, 0.3);
        border-radius: 0.8rem;
        overflow: hidden;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2);
        min-height: 30rem; /* 增加最小高度 */
        height: 100%;

        .enterpriselist-container {
          width: 34rem;
          padding-right: 1rem;
          box-sizing: border-box;

          .enterpriselist {
            height: 100%;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.3) transparent;

            &::-webkit-scrollbar {
              width: 0.5rem;
            }

            &::-webkit-scrollbar-thumb {
              background-color: rgba(255,255,255,0.3);
              border-radius: 0.25rem;
            }

            .enterpris-item {
              width: 100%;
              height: 4rem;
              background: linear-gradient(
                  -270deg,
                  rgba(26, 73, 135, 0) 0%,
                  #1a4987 48%,
                  rgba(26, 73, 135, 0) 100%
              );
              opacity: 0.6;
              margin-bottom: 0.2rem;
              padding-left: 1.2rem;
              cursor: pointer;
              transition: all 0.3s;

              &.active {
                opacity: 1;
                background: linear-gradient(
                    -270deg,
                    rgba(26, 73, 135, 0) 0%,
                    #1a4987 68%,
                    rgba(26, 73, 135, 0) 100%
                );
              }

              .selection-indicator {
                width: 2rem;
                height: 2rem;
                margin-right: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;

                .selected-icon {
                  width: 2.5rem;
                  height: 2.5rem;
                }
              }

              .enterprise-name {
                white-space: nowrap;
              }
            }
          }
        }

        .pie-chart-container {
          flex: 1;
          display: flex;
          padding: 1rem;
          min-width: 32rem; /* 增加饼图容器最小宽度 */

          .pie-chart-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .pie-chart {
            width: 100%;
            height: 100%;
            min-height: 28rem; /* 增加饼图最小高度 */
          }
        }
      }

      .business-data {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 2rem;
        color: #ffffff;
        text-shadow: 0 0.3rem 1.6rem rgba(4, 7, 29, 0.5);
        background: linear-gradient(
            180deg,
            #ffffff 43.115234375%,
            #67cfff 99.0478515625%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1.5rem;
      }

      .business-num {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: D-DIN;
        font-weight: bold;
        font-size: 9rem;
        color: #ffffff;
        text-shadow: 0 0.3rem 1.6rem rgba(4, 7, 29, 0.5);
        background: linear-gradient(
            180deg,
            #ffffff 43.115234375%,
            #67cfff 99.0478515625%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1.5rem;
      }

      .area {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 2rem;
        width: 100%;

        .project {
          background: url("@/assets/image/info/规划面积.png") no-repeat center center;
          background-size: contain;
        }

        .activate {
          background: url("@/assets/image/info/已建成面积.png") no-repeat center center;
          background-size: contain;
        }

        .worker {
          background: url("@/assets/image/info/产业工人 (人).png") no-repeat center center;
          background-size: contain;
        }

        .item {
          width: 24.1rem;
          height: 9.7rem;
          padding: 2.2rem 0;
          box-sizing: border-box;

          .boxtext {
            height: 100%;
            margin-left: 9.7rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .boxtext-top {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 1.4rem;
              color: #ffffff;
            }

            .boxtext-btoom {
              font-family: DIN;
              font-weight: bold;
              font-size: 2.8rem;
              color: #ffffff;
            }
          }
        }
      }

      .supplybg {
        background: url("@/assets/image/info/供需大厅.png") no-repeat left center;
        background-size: auto 100%;
        height: 4.4rem;
        width: 100%;
        margin-bottom: 1rem;
      }

      .quantity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem;

        .quantity-item {
          background: url("@/assets/image/info/数量.png") no-repeat center center;
          background-size: contain;
          height: 9.7rem;
          width: 100%;
        }
      }

      .industrybg {
        background: url("@/assets/image/info/产业布局.png") no-repeat left center;
        background-size: auto 100%;
        height: 4.4rem;
        width: 100%;
        margin-bottom: 0.8rem;
      }
    }

    .content-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;

      .overallbg {
        background: url("@/assets/image/info/园区布局.png") no-repeat left center;
        background-size: auto 100%;
        height: 4.4rem;
        width: 100%;
      }

      .overallimg {
        width: 100%;
        height: 45rem;
        object-fit: cover;
        border-radius: 0.4rem;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
        margin-bottom: 3rem;
      }

      .developbg {
        background: url("@/assets/image/info/园区发展.png") no-repeat left center;
        background-size: auto 100%;
        height: 4.4rem;
        width: 100%;
        margin-bottom: 1.5rem;
      }

      .developbox {
        height: 45rem;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background: rgba(26, 73, 135, 0.6);
        border-radius: 0.4rem;
        flex-grow: 1;
        overflow: hidden;
      }
    }
  }
}

// 工具类样式
.f28bcf {
  font-family: DIN;
  font-weight: bold;
  font-size: 2.8rem;
  color: #ffffff;
}

.f14cf {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 1.4rem;
  color: #ffffff;
}

.fcc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcolcc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fc {
  display: flex;
  align-items: center;
}

.mb25 {
  margin-bottom: 2.5rem;
}

.mb30 {
  margin-bottom: 3rem;
}

.mb20 {
  margin-bottom: 2rem;
}

.mb15 {
  margin-bottom: 1.5rem;
}

.ml20 {
  margin-left: 2rem;
}

.f20bcf {
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 2rem;
  color: #ffffff;
  text-shadow: 0 0.3rem 1.6rem rgba(4, 7, 29, 0.5);
  background: linear-gradient(
      180deg,
      #ffffff 43.115234375%,
      #67cfff 99.0478515625%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.f16cf {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 1.6rem;
  color: #ffffff;
  text-shadow: 0 0.3rem 1.6rem rgba(4, 7, 29, 0.5);
  background: linear-gradient(
      180deg,
      #ffffff 43.115234375%,
      #67cfff 99.0478515625%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.f20bc158BE8 {
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 2rem;
  color: #158be8;
  text-stroke: 0.2rem #ffffff;
  -webkit-text-stroke: 0.2rem #ffffff;
}

// 响应式调整
@media screen and (max-width: 1600px) {
  .content-centre {
    flex: 1.1 !important;
  }

  .enterprise-stats-container {
    min-height: 28rem !important;
  }

  .pie-chart-container {
    min-width: 28rem !important;
  }

  .pie-chart {
    min-height: 25rem !important;
  }

  .content-right .overallimg,
  .content-right .developbox {
    height: 38rem !important;
  }
}

@media screen and (max-width: 1440px) {
  .content {
    padding: 0 3rem 2rem !important;
  }

  .content-centre {
    flex: 1 !important;
  }

  .enterpriselist-container {
    width: 30rem !important;
  }

  .enterprise-stats-container {
    min-height: 25rem !important;
  }

  .content-right .overallimg,
  .content-right .developbox {
    height: 32rem !important;
  }
}
</style>
